<template>
  <a-card :bordered="false">
    <p>
    <h3><b>设置阶梯售价</b></h3></p>

    <!-- 操作按钮区域 -->

    <!-- table区域-begin -->
    <div>

      <a-list
        class="demo-loadmore-list"
        :loading="loading"
        item-layout="horizontal"
        :data-source="data"
      >
        <a-list-item slot="renderItem" slot-scope="item, index">
          大于等于：
          <a-input v-model="item.minNumbers" disabled="true" style="width: 150px"></a-input>
          米--
          小于：
          <a-input v-model="item.maxNumbers" disabled="true" style="width: 150px"></a-input>
          米&nbsp;&nbsp;
          <a-input v-model="item.price" disabled="true" style="width: 150px"></a-input>
          元
          <a-button @click="deleteFunc(item.id)">删除</a-button>
        </a-list-item>
      </a-list>
      <div>
        <br/>
        <a-button style="width: 500px;height: 36px;margin-bottom: 20px" @click="xianshi=true">添加</a-button>
        <br/>
      </div>

      <div v-if="xianshi">
        大于等于：
        <a-input-number :min="0" :max="9999999" v-model="minNumbers" style="width: 150px"></a-input-number>
        米--
        小于：
        <a-input-number :min="0" :max="9999999" v-model="maxNumbers" style="width: 150px"></a-input-number>
        米
        <a-input-number :min="0" v-model="price" style="width: 150px"></a-input-number>
        元

      </div>
      <br/>
      <a-button type="primary" style="color: #F9D532;width: 80px;height: 36px;background: #333333;border-style: none;"
                @click="saveGroupPriceFunc">保存
      </a-button>&nbsp;&nbsp;
      <a-button style="width: 80px;height: 36px;;" @click="retrunshoujia">返回</a-button>
    </div>
    <!-- table区域-end -->
  </a-card>
</template>

<script>

import {getAction} from "../../api/manage";

export default {
  data() {
    return {
      xianshi: false, // 是否显示
      price: '',    // 售价
      minNumbers: '', // 区间最小值
      maxNumbers: '', // 区间最大值
      data: [], // 面料组的阶梯售价
      url: {
        list: '/fabricCenter/listGroupPrice', // 面料组阶梯售价
        add: '/fabricCenter/saveGroupPrice', // 添加阶梯售价
        deleteGroupPrice: '/fabricCenter/deleteGroupPrice', // 删除阶梯售价
      },
    }
  },
  created() {
    this.getfabricListFunc()
  },
  methods: {

    /**
     * 删除面料组价格
     * @param id 阶梯价id
     */
    deleteFunc(id) {
      getAction(this.url.deleteGroupPrice, {'id': id}).then(res => {
        if (res.code == '0') {
          this.$message.success("操作成功")
          this.getfabricListFunc()
        } else {
          this.$message.error("操作失败")
        }
      })
    },

    //点击取消后回到面料组列表
    retrunshoujia() {
      this.$router.go(-1)
    },

    /**
     * 获取面料组阶梯售价
     */
    getfabricListFunc() {
      getAction(this.url.list, {
        'groupid': this.$route.query.group
      }).then(res => {
        if (res.code == '0') {
          this.data = res.data
          this.minNumbers = this.data[this.data.length - 1].maxNumbers
        }
      })
    },

    /**
     * 添加面料组阶梯售价
     */
    saveGroupPriceFunc() {
      if (this.minNumbers == '') {
        this.$message.warning("请输入完整的阶梯价")
        return
      } else if (this.maxNumbers == '') {
        this.$message.warning("请输入完整的阶梯价")
        return;
      } else if (this.price == '') {
        this.$message.warning("请输入完整的阶梯价")
        return;
      } else {
        getAction(this.url.add, {
          'minNumbers': this.minNumbers,
          'maxNumbers': this.maxNumbers,
          'price': this.price,
          'groupId': this.$route.query.group
        }).then(res => {
          if (res.code == '0') {
            this.$message.success("操作成功")
            this.minNumbers = ''
            this.maxNumbers = ''
            this.price = ''
            this.xianshi = false
            this.getfabricListFunc()
          } else if (res.code == '-1') {
            this.$message.warning(res.msg)
          } else {
            this.$message.warning(res.msg)
          }
        })
      }
    },
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less'
</style>